<template>
	<view>
		<view class="top-search">
			<uni-nav-bar backgroundColor="white" :fixed="true" color="black" borderColor="#efefef" status-bar title="工作汇总" rightIcon="settings" @clickRight="on_sz"/>
			<view style="height: 1px;background-color: #efefef;"></view>
			<view style="height: 160px;background-color: white;display: flex;flex-direction: column;">
				<view style="height: 90px;background-color: white;display: flex;flex-direction: row;">
					<view style="width: 5%;"></view>
					<view style="width: 90%;display: flex;flex-direction: row;">
						<view style="width: 50%;">
							<qiun-data-charts
							  type="arcbar"
							  :opts="opts"
							  :chartData="chartData"
							/>
						</view>
						<view style="width: 50%;justify-content: center;align-items: center;display: flex;">
							项目总数：{{xmzlMap.ZSL}}
						</view>
						
					</view>
					<view style="width: 5%;"></view>
				</view>
				<view style="height: 60px;background-color: white;display: flex;flex-direction: row;border-top: 1px solid #f7f7f7;">
					<view style="width: 5%;"></view>
					<view style="width: 90%;display: flex;flex-direction: row;">
						<view style="display: flex;flex-direction: column;width: 20%;height: 100px;">
							<view style="height: 40px;justify-content: center;align-items: center;display: flex;font-weight: bold;color: black;">{{xmzlMap.WQD}}</view>
							<view style="height: 20px;justify-content: center;align-items: center;display: flex;color: #959595;font-size: 14px;">未启动</view>
						</view>
						<view style="display: flex;flex-direction: column;width: 20%;height: 100px;">
							<view style="height: 40px;justify-content: center;align-items: center;display: flex;font-weight: bold;color: #85d565;">{{xmzlMap.XQFX}}</view>
							<view style="height: 20px;justify-content: center;align-items: center;display: flex;color: #959595;font-size: 14px;">需求分析</view>
						</view>
						<view style="display: flex;flex-direction: column;width: 20%;height: 100px;">
							<view style="height: 40px;justify-content: center;align-items: center;display: flex;font-weight: bold;color: #65d5bd;">{{xmzlMap.XTSJ}}</view>
							<view style="height: 20px;justify-content: center;align-items: center;display: flex;color: #959595;font-size: 14px;">系统设计</view>
						</view>
						<view style="display: flex;flex-direction: column;width: 20%;height: 100px;">
							<view style="height: 40px;justify-content: center;align-items: center;display: flex;font-weight: bold;color: #e9ca55;">{{xmzlMap.KFZ}}</view>
							<view style="height: 20px;justify-content: center;align-items: center;display: flex;color: #959595;font-size: 14px;">编码阶段</view>
						</view>
						<view style="display: flex;flex-direction: column;width: 20%;height: 100px;">
							<view style="height: 40px;justify-content: center;align-items: center;display: flex;font-weight: bold;color: #4a8ce0;">{{xmzlMap.YXWH}}</view>
							<view style="height: 20px;justify-content: center;align-items: center;display: flex;color: #959595;font-size: 14px;">运行维护</view>
						</view>
					</view>
					<view style="width: 5%;"></view>
				</view>
			</view>
			<view style="height: 3px;background-color: #efefef;"></view>
			<!-- 项目进度 -->
			<scroll-view class="tab-view" scroll-x="true" :show-scrollbar="false">
				<view :class="['tab-view-item',tabIndex==0?'tab-view-item-active':'tab-view-item']" @tap="onTab(0)">
					<view>全部<text space="nbsp">&nbsp;{{zsl}}</text></view>
				</view>
				<view :class="['tab-view-item',tabIndex==1?'tab-view-item-active':'tab-view-item']" @tap="onTab(1)">
					<view>已启动<text space="nbsp">&nbsp;{{yqd}}</text></view>
				</view>
				<view :class="['tab-view-item',tabIndex==2?'tab-view-item-active':'tab-view-item']" @tap="onTab(2)">
					<view>已完成<text space="nbsp">&nbsp;{{ywc}}</text></view>
				</view>
				<view :class="['tab-view-item',tabIndex==3?'tab-view-item-active':'tab-view-item']" @tap="onTab(3)">
					<view>待安排<text space="nbsp">&nbsp;{{wqd}}</text></view>
				</view>
				<view :class="['tab-view-item',tabIndex==4?'tab-view-item-active':'tab-view-item']" @tap="onTab(4)">
					<view>其它<text space="nbsp">&nbsp;{{fkjxm}}</text></view>
				</view>
			</scroll-view>
		</view>
		<view :style="'height:'+top_height+'px'"></view>
		<view style="height: 3px;"></view>
		<view class="card">
			<block  v-for="(item, index) in listInfo" :key="index">
				<view style="min-height: 90px;background-color: white;display: flex;flex-direction: row;">
					<view style="width: 3%;"></view>
					<view style="width: 94%;padding-top: 8px;color: #808080;">
						<view style="height: 2px;"></view>
						<view style="display: flex;flex-direction: row;">
							<view style="width: 80%;">{{item.xmmc}}&nbsp;<text v-if="item.xmlx==1">[大型 <text v-if="item.sfkjxm==1">科</text>]</text><text v-if="item.xmlx==2">[小型 <text v-if="item.sfkjxm==1">科</text>]</text></view>
							<view style="width: 20%;display: flex;flex-direction: row;justify-content: flex-end;">
								<view style="display: flex;align-items: center;justify-content: center;"><image src="../../static/my-ico/fzr.png" style="width: 18px;height: 18px;"></image></view>
								<view style="display: flex;align-items: center;justify-content: center;">{{item.fzr.xm}}</view>
							</view>
						</view>
						<view style="height: 2px;"></view>
						<view style="width: 100%;" v-if="item.xmZtxxId!=0">
							启动时间：{{item.xqfxKsrq}}
						</view>
						<view style="height: 2px;"></view>
						<view style="width: 100%;" v-if="item.jhwcsj!=null">
							计划完成时间：{{item.jhwcsj}}
						</view>
						<view style="height: 2px;"></view>
						<view style="display: flex;flex-direction: row;">
							<view style="width: 100%;" v-if="item.xmZtxxId==0">
								待安排
							</view>
							<view style="width: 100%;" v-if="item.xmZtxxId==1">
								<view style="display: flex;flex-direction: column;">
									<view style="color: #85d565;">{{item.xmZtxx.name}}</view>
								</view>
								<view style="height: 5px;"></view>
								<view v-if="item.zgxxnamesWithZt.length >0">项目组成员：
								<block  v-for="(item1, index1) in item.zgxxnamesWithZt" :key="index1">
									 {{ item1 }}{{ index1 < item.zgxxnamesWithZt.length - 1 ? '、' : '' }}
								</block>
								</view>
							</view>
							<view style="width: 100%;" v-if="item.xmZtxxId==2">
								<view style="display: flex;flex-direction: column;">
									<view style="color: #65d5bd;;">{{item.xmZtxx.name}}</view>
								</view>
								<view style="height: 5px;"></view>
								<view v-if="item.zgxxnamesWithZt.length >0">项目组成员：
								<block  v-for="(item1, index1) in item.zgxxnamesWithZt" :key="index1">
									 {{ item1 }}{{ index1 < item.zgxxnamesWithZt.length - 1 ? '、' : '' }}
								</block>
								</view>
							</view>
							<view style="width: 100%;" v-if="item.xmZtxxId==3">
								<view style="display: flex;flex-direction: column;">
									<view style="color: #e9ca55;">{{item.xmZtxx.name}}</view>
								</view>
								<view style="height: 5px;"></view>
								<view v-if="item.zgxxnamesWithZt.length >0">项目组成员：
								<block  v-for="(item1, index1) in item.zgxxnamesWithZt" :key="index1">
									 {{ item1 }}{{ index1 < item.zgxxnamesWithZt.length - 1 ? '、' : '' }}
								</block>
								</view>
							</view>
							<view style="width: 100%;" v-if="item.xmZtxxId==4">
								<view style="display: flex;flex-direction: column;">
									<view style="color: #4a8ce0">{{item.xmZtxx.name}}</view>
									<view style="height: 5px;"></view>
									<view>上线时间：{{item.xtsxKsrq}}</view>
									<view style="height: 5px;"></view>
								</view>
							</view>
						</view>
						<view style="height: 8px;"></view>
					</view>
					<view style="width: 3%;"></view>
				</view>
				<view style="height: 3px;width: 100%;background-color: #efefef;"></view>
			</block>
		</view>
		<!-- 安卓APP更新弹窗 -->
		<view class="download">
			<uni-popup ref="popup" type="center" :mask-click="false">
				<view class="upgrade">
					<view class="logo">
						<image src="../../static/update/upgrade.png" mode="widthFix" />
					</view>
					<view class="content">
						<view class="title">
							<text>{{upgrading?"正在升级":"发现新版本:"+versionStr}}</text>
						</view>
						<view class="container">
							<view class="descriptions">
								<text>{{upgrading?"正在为您下载,请耐心等待":"本次版本更新描述内容:"}}</text>
							</view>
							<view class="details" v-if="!upgrading">
								<scroll-view style="height: 120px;" scroll-y="true"><text>{{modifyContent}}</text></scroll-view>
							</view>
							<view v-else class="prpgroess">
								<progress
								:percent="downloadTime"
								active-mode="forwards"
								activeColor="red"
								active
								stroke-width="4"
								show-info
								/>
							</view>
						</view>
						<view v-if="!upgrading" class="btn-group">
							<view class="confirm" @click="upgradeEvent">
								<text>开始更新</text>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- 安卓APP更新弹窗 -->
	</view>
</template>

<script>
	var timerDownId = null,_self;
	import utils from '../../common/utils'
	export default {
	  data() {
	    return {
			top_height:'20',
			//版本代码
			versionCode: 28,
			//版本字符串
			versionStr: "1.0.0530",
			//是否更新
			upgrading: false,
			//下载时间
			downloadTime: 0,
			//定时器
			timer: null,
			//是否强制更新
			isForceUpgrade: false,
			//下载任务
			downloadTask: null,
			//下载地址
			downloadUrl: "",
			//更新内容
			modifyContent:"",
			//本地版本
			localVersion:'',
			year:"",
			xmzlMap:"",
			//项目进度相关
			//总数量
			zsl:0,
			//已启动，状态 1,2,3
			yqd:0,
			//已完成  状态 4
			ywc:0, 
			//待安排 状态 0
			wqd:0,
			//其它 非科技项目
			fkjxm:0,
			tabIndex:1,
			//项目明细
			listInfo:'',
			lx:'yqd',
			chartData: {},
			//您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
			opts: {
				color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				padding: undefined,
				title: {
				  name: "10%",
				  fontSize: 22,
				  color: "#2fc25b"
				},
				subtitle: {
				  name: "完成率",
				  fontSize: 12,
				  color: "#666666"
				},
				extra: {
				  arcbar: {
					type: "default",
					width: 6,
					backgroundColor: "#E9E9E9",
					startAngle: 0.75,
					endAngle: 0.25,
					gap: 2,
					linearType: "custom"
				  }
				}
	      }
	    };
	  },
	  onReady() {
	  },
	  methods: {
		  //安卓更新检查
		  AndroidCheckUpdate:async function(){
		  	let data = {
		  		clientType:"1",
		  		timestamp:utils.getTimestamp(),
		  	};
		  	let postData = {
		  		data:data
		  	}
		  	let res = await this.$myRequest.post_token(getApp().globalData.getVersion,postData);   // 关键点
			console.info("AndroidCheckUpdate返回："+JSON.stringify(res));
		  	if (res.code==0)
		  	{
				let a = JSON.parse(utils.decrypt(res.data,uni.getStorageSync("userInfo").aesKey,uni.getStorageSync("userInfo").aesIv));
				console.info("AndroidCheckUpdate返回解密："+JSON.stringify(a));
		  		_self.modifyContent = a.modifyContent;
		  		_self.versionCode = a.versionCode;
		  		_self.versionStr = a.versionName;
		  		_self.downloadUrl = a.downloadUrl;
		  		plus.runtime.getProperty(plus.runtime.appid, function(inf) {
		  			_self.localVersion = inf.versionCode;
		  		});
		  		setTimeout(function() {
		  			if (_self.localVersion < _self.versionCode)
		  			{
		  				uni.hideTabBar();
		  				_self.$refs.popup.open();
		  			}
		  		}, 2000);
		  	}
		  	else{
		  		utils.toast("版本信息获取失败！");
		  	}	
		  },
		  //取消更新
		  hiddenUppop() {
		  	this.$refs.popup.close();
		  },
		  //点击更新
		  upgradeEvent() {
		  	this.upgrading = true;
		  	//判断是否已经下载完成
		  	var isUpdate = uni.getStorageSync("isUpdate");
		  	var versionCode = uni.getStorageSync("versionCode");
		  	var apkPath =  uni.getStorageSync("apkPath");
		  	if (versionCode == this.versionCode && isUpdate == "1")
		  	{
		  		if (this.$refs.popup) {
		  		  setTimeout(() => {
		  		    this.upgrading = false;
		  			plus.runtime.install(apkPath);  // 安装下载的apk文件
		  		  }, 200);
		  		}
		  	}
		  	else this.downloadApplications();
		  	
		  },
		  //下载更新
		  downloadApplications() {
			console.info("下载地址："+this.downloadUrl);
		  	//建立下载任务
		  	this.downloadTask = uni.downloadFile({
		  		//下载地址
		  		url: this.downloadUrl,
		  		success: (res) => {
		  			if (res.statusCode === 200) {
		  				console.log("下载完成！"+JSON.stringify(res));
		  				this.downloadTime = 0;
		  				if (this.$refs.popup) {
		  				  this.$refs.popup.close();
		  				
		  				  setTimeout(() => {
		  				    this.upgrading = false;
		  				  }, 200);
		  				}
		  				//保存文件
		  				//把当前app保存下载
		  				console.log("准备保存文件："+res.tempFilePath);
		  				uni.saveFile({
		  				  tempFilePath: res.tempFilePath,
		  				  success: (resp) => {
		  				    //保存成功
		  				    var savedFilePath = resp.savedFilePath;
		  					uni.setStorageSync("versionCode",this.versionCode);
		  					uni.setStorageSync("isUpdate","1");
		  					uni.setStorageSync("apkPath",savedFilePath);
		  				    //安装
		  					plus.runtime.install(savedFilePath);  // 安装下载的apk文件
		  					uni.showTabBar();
		  				  },
		  				  fail: (err) => {
		  				    //保存失败
		  				    console.error(err);
		  				  },
		  				});
		  			}
		  		},fail:(res)=>{
		  			console.info("下载失败！");
		  		},
		  	});
		  	this.downloadTask.onProgressUpdate((res) => {
		  		//下载进度
		  		var a = 0;
		  		//进度条百分比 totalSize为总量，baifen为当前下载的百分比
		  		if(res.totalBytesExpectedToWrite==0){
		  		  res.totalBytesExpectedToWrite=parseInt(res.totalBytesExpectedToWrite);
		  		}
		  		if(parseInt(res.downloadedSize/res.totalBytesExpectedToWrite*100)!=this.downloadTime){
		  		   a = parseInt(res.totalBytesWritten/res.totalBytesExpectedToWrite*100);
		  		   if (a != this.downloadTime) {
		  			   //console.log("此时才更新下载进度！"+this.downloadTime);
		  			   this.downloadTime = a;
		  		   }
		  		}						    
		  	});
		  },
		  //取消下载
		  abortDownload() {
		  	this.downloadTime = 0;
		  	if (this.$refs.popup) {
		  		this.$refs.popup.close();
		  		setTimeout(() => {
		  		this.upgrading = false;
		  		}, 200);
		  	}
		  	clearInterval(this.timer);
		  		if (this.downloadTask) {
		  		this.downloadTask.abort();
		  	}
		  },
		  //初始化数据
		  initPage: async function () {
		  	this.$utils.showLoading("数据加载中...");
		  	let data = {
		  		timestamp:this.$utils.getTimestamp()
		  	};
		  	let enData = this.$utils.encrypt(JSON.stringify(data),uni.getStorageSync("userInfo").aesKey,uni.getStorageSync("userInfo").aesIv);
		  	let postData = {
		  		data:""+enData+""
		  	}
		  	try {
		  		let res = await this.$myRequest.post_token(getApp().globalData.getXmzl,postData);   // 关键点
				//console.info("initPage获取到的:"+JSON.stringify(res));
		  		this.$utils.hideLoading();
		  		if (res.code==0)
		  		{
					let a = JSON.parse(utils.decrypt(res.data,uni.getStorageSync("userInfo").aesKey,uni.getStorageSync("userInfo").aesIv));
					console.info("initPage获取到的:"+JSON.stringify(a));
					this.year=a.rtnXmzlMap.year;
					this.xmzlMap=a.rtnXmzlMap.xmzlMap;
					let wcl = (a.rtnXmzlMap.xmzlMap.YXWH / a.rtnXmzlMap.xmzlMap.ZSL).toFixed(2); // 结果为 "3.33"
					let percentage = (wcl * 100).toFixed(2).replace(/\.00$/, '') + '%'; // 转换为百分比并保留两位小数
					let res1 = {
					    series: [
					      {
					        name: "正确率",
					        color: "#2fc25b",
					        data: wcl
					      }
					    ]
					  };
					this.opts.title.name=percentage;
					this.chartData = JSON.parse(JSON.stringify(res1));
					this.getNdxm();
		  		}
				else if (res.code==6){
					uni.setStorageSync('isLogin',false);
					//弹出登录页面
					uni.navigateTo({
						url: '/pages/login/login',
						animationType: 'pop-in',
						animationDuration: 200
					});
				}
		  		else{
		  			this.$utils.toast("数据加载失败！");
		  		}
		  	} catch (e) {  
		  		this.$utils.hideLoading();
		  		console.info(e);
		  		this.$utils.toast("数据加载失败！");           
		  	}
		  },
		  //获取项目进度
		  getNdxm: async function () {
		  	this.$utils.showLoading("项目进度获取中...");
		  	let data = {
		  		lx:this.lx,
		  		nd:this.year,
				sfkjxm:"1",
		  		timestamp:this.$utils.getTimestamp()
		  	};
		  	let enData = this.$utils.encrypt(JSON.stringify(data),uni.getStorageSync("userInfo").aesKey,uni.getStorageSync("userInfo").aesIv);
		  	let postData = {
		  		data:""+enData+""
		  	}
		  	try {
		  		//console.info("initPage:"+JSON.stringify(postData));
		  		let res = await this.$myRequest.post_token(getApp().globalData.getXmNdmx,postData);   // 关键点
		  		//console.info("initPage获取到的:"+JSON.stringify(res));
		  		this.$utils.hideLoading();
		  		if (res.code==0)
		  		{
		  			let a = JSON.parse(utils.decrypt(res.data,uni.getStorageSync("userInfo").aesKey,uni.getStorageSync("userInfo").aesIv));
		  			console.info("getNdxm获取到的data:"+JSON.stringify(a));
		  			this.listInfo = a.xmXmxxList;
		  			this.zsl = a.xmslMap.ZSL;
		  			this.yqd = a.xmslMap.XQFX+a.xmslMap.XTSJ+a.xmslMap.KFZ;
		  			this.ywc = a.xmslMap.YXWH;
		  			this.wqd = a.xmslMap.WQD;
					this.fkjxm = a.xmslMap.FKJXM;
		  		}
		  		else if (res.code==6){
		  			uni.setStorageSync('isLogin',false);
		  			//弹出登录页面
		  			uni.navigateTo({
		  				url: '/pages/login/login',
		  				animationType: 'pop-in',
		  				animationDuration: 200
		  			});
		  		}
		  		else{
		  			this.$utils.toast("项目进度获取失败！"+res.msg);
		  		}
		  	} catch (e) {  
		  		this.$utils.hideLoading();
		  		this.$utils.toast("项目进度获取失败！"+e);           
		  	}
		  },
		  on_sz(){
			  this.$utils.toast("设置功能暂未开放！");
		  },
		  onTab:function(index){
		 	this.tabIndex = index;
		 	if (this.tabIndex==0) this.lx="zsl";
		 	if (this.tabIndex==1) this.lx="yqd";
		 	if (this.tabIndex==2) this.lx="yxwh";
		 	if (this.tabIndex==3) this.lx="wqd";
			if (this.tabIndex==4) this.lx="fkjxm";
		 	this.getNdxm();
		 }
	  },onLoad() {
			_self = this;
		},onShow() {
			_self = this;
			uni.getSystemInfo({
				success:(res) => {
					//检测当前平台，如果是安卓则启动安卓更新  
					if(res.platform=="android"){  
						this.AndroidCheckUpdate();  
					}  
				}  
			})
			this.isLogin = utils.checkLogin();
			console.info("获取到的登录状态："+this.isLogin);
			if (this.isLogin){
				this.phone = uni.getStorageSync("userInfo").phone;
				this.initPage();
			}else{
				//弹出登录页面
				uni.navigateTo({
					url: '/pages/login/login?sftc=1',
					animationType: 'pop-in',
					animationDuration: 200
				});
			}
		},onReady() {
			let that = this;
			/* 设置当前滚动容器的高，若非窗口的高度，请自行修改 */
			uni.getSystemInfo({
				success:(res)=>{
					let info = uni.createSelectorQuery().select(".top-search");
					info.boundingClientRect(function(data) { 
						//console.info("高度："+data.height);
						that.top_height = data.height;
					}).exec()
				}
			});
		}
	};
</script>

<style>
	page{
		background-color: #efefef;
	}
	.top-search{
		width: 100%;
		background-color: white;
		position: fixed;
		display: inline-block;
		color: #292933;
		z-index: 9999;
	}
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 200px;
		height: 200px;
	}
	/* app更新 */
	.download .logo {
	  width: 208rpx;
	}
	
	.download .upgrade {
	  position: relative;
	  background: #fff;
	  width: 468rpx;
	  min-height: 238rpx;
	  border-radius: 20rpx;
	}
	.download .logo image {
	  width: 208rpx;
	  position: absolute;
	  top: -80rpx;
	  left: 0;
	  right: 0;
	  margin: 0 auto;
	}
	.download .content {
	  padding-top: 80rpx;
	}
	.download .content .title {
	  text-align: center;
	  font-size: 30rpx;
	  font-weight: bold;
	}
	
	.download .content .container {
	  color: #666;
	}
	.download .content .container .descriptions {
	  padding: 0rpx 30rpx;
	  text-align: center;
	  font-size: 28rpx;
	}
	.download .content .container .details,
	.download .content .prpgroess {
	  padding: 16rpx 46rpx;
	  box-sizing: border-box;
	  font-size: 24rpx;
	}
	.download .content .prpgroess {
	  padding: 16rpx 22rpx;
	  margin: 20rpx 0;
	}
	.download .content .btn-group {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.download .content .btn-group view {
	  width: 200rpx;
	  height: 68rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  margin: 14rpx;
	  font-size: 24rpx;
	  border-radius: 16rpx;
	  line-height: 1.5;
	}
	.download .content .btn-group view:last-child {
	  background: #ef5656;
	  color: #fff;
	}
	/* 顶部选项卡 */
	.tab-view{
		background-color: white;
		width: 100%;
		height: 88rpx;
		white-space: nowrap;
		/* border: 1px solid red; */
		line-height: 88rpx;
	}
	.tab-view-item{
		min-width: 100px;
		height: 138rpx;
		display: inline-block;
		color: #8a8999;
	}
	.tab-view-item-active{
		min-width: 100px;
		height: 138rpx;
		display: inline-block;
		line-height: 36px;
		color: #292933;
	}
	.tab-view-item-active view{
		text-align: center;
		min-width: 80px;
		color: #348fe4;
		border-bottom: 3px solid #348fe4;
		margin-left: 25%;
	}
	.tab-view-item view{
		text-align: center;
		min-width: 80px;
		margin-left: 25%;
	}
	.card{
		width: 100%;
		background-color: white;
		height: auto;
	}
	.card-item{
		width: 100%;
		background-color: white;
	}
	.card-item-1{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.card-item-2{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.card-item-3{
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 1px solid #eeeeee;
	}
</style>	